<template>
    <div>
        <div class="contact">
		<div class="container">
			<h3 class="agileits-title">发布宠物信息</h3>
			<div class="contact-agileinfo">
				<div class="col-md-12 contact-right">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="上传图片：">
                <input name="file" type="file" @change="upload($event)" accept=".jpg,.bmp,.png,.jpeg"/>
            </el-form-item>
						<el-form-item label="标题：" prop="title">
							<el-input v-model="ruleForm.title"></el-input>
						</el-form-item>
						<el-form-item label="信息所属版块：" prop="type">
							<el-select v-model="ruleForm.type" placeholder="请选择版块">
							<el-option label="宠物领养" value="1"></el-option>
							<el-option label="宠物寻找" value="0"></el-option>
							</el-select>
						</el-form-item>				
						<el-form-item label="宠物种类：" prop="category">
							<el-radio-group v-model="ruleForm.category">
							<el-radio label="喵星人"></el-radio>
							<el-radio label="汪星人"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="详细描述" prop="content">
              <div class="edit_container" style="height: 500px">
                <quill-editor v-model="ruleForm.content" ref="myQuillEditor" class="editer" :options="editorOption" style="height: 400px">
                </quill-editor>
              </div>
            </el-form-item>
						<el-form-item>
							<input type="submit" value="提交" @click="submitForm($event)">
						</el-form-item>            
					</el-form>
          
				</div>
			</div>
		</div>
	</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
          ruleForm: {
                image: '',
                image_name:'',
                type: '',
                category: '',
                content: ''
              },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
          type: [
            {  required: true, message: '请选择发布版块', trigger: 'change' }
          ],
          category: [
            { required: true, message: '您还未选择宠物类别', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请填写相关信息', trigger: 'blur' }
          ]
        },

        editorOption: {},
	};
    },
    computed: {
   editor() {
    return this.$refs.myQuillEditor.quill
   }},
    methods: {
        upload(event){
            this.ruleForm.image = event.target.files[0];//获取文件
            this.ruleForm.image_name = this.ruleForm.image.name
        },
        submitForm(event) {
            /* this.$refs[formName].validate((valid) => {
              if (valid) { */
                  event.preventDefault();//取消默认行为
                  let formdata =new FormData()
                  formdata.append('image', this.ruleForm.image),
                  formdata.append('image_name', String(this.ruleForm.image_name)),
                  formdata.append('title', this.ruleForm.title),
                  formdata.append('type', this.ruleForm.type),
                  formdata.append('category', this.ruleForm.category),
                  formdata.append('content', this.ruleForm.content)
                  let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data' 
                    }
                  };
                  var that = this
                  const path = 'http://10.138.120.46:5000/api/upload/' + this.$store.state.UID;
                  this.axios.post(path, formdata, config).then( (response) => {
                      if(response.status == 200){
                          that.$message({
                            type:'success',
                            message:'信息发布成功！'
                          })
                      }
                  }).catch((error) =>{
                      alert(error);
                  });
              /* } else {
                return false;
              } */
            }
          },
        
        components:{
          
        }
};
</script>

<style scoped lang="scss">
/* @import 'quill/dist/quill.core.css';
@import 'quill/dist/quill.snow.css';s
@import 'quill/dist/quill.bubble.css'; */
</style>